<template>

  <div class="homeDetail">

    <div class="tabr-nav-title">
       <van-nav-bar
        title="完成上报"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="form-container">
       <van-form @submit="onSubmit" label-width="100%" label-align="top"
        > <van-cell-group
          > <van-field
            name="personnelNumber"
            label="应急抢险作业人员参与巡查处置（人次）"
            > <template #input
              > <!-- <van-stepper min="0" v-model="state.detail.personnelNumber" disabled /> -->
              <input
                class="disabled"
                v-model="state.detail.personnelNumber"
                disabled
              /> </template
            > </van-field
          > <van-field name="specialVehiclesNumber" label="特种车辆（车次）"
            > <template #input
              > <input
                class="disabled"
                v-model="state.detail.specialVehiclesNumber"
                disabled
              /> </template
            > </van-field
          > <van-field name="pumpingEquipmentQuantity" label="排涝设备（台次）"
            > <template #input
              > <input
                class="disabled"
                v-model="state.detail.pumpingEquipmentQuantity"
                disabled
              /> </template
            > </van-field
          > <van-field name="mannedVehiclesNumber" label="载人车辆（车次）"
            > <template #input
              > <input
                class="disabled"
                v-model="state.detail.mannedVehiclesNumber"
                disabled
              /> </template
            > </van-field
          > <van-field name="frontForceNum" label="抽排能力（m³/h）"
            > <template #input
              > <input
                class="disabled"
                v-model="state.detail.frontForceNum"
                disabled
              /> </template
            > </van-field
          > <van-field
            name="log"
            label="响应完成描述"
            v-model="state.detail.log"
            > </van-field
          > </van-cell-group
        >
        <div
          class="newList"
          @click="cardClick"
          v-if="state.detail.workType === '巡查工单'"
        >

          <div
            class="list"
            v-for="(item, index) in state.matterList"
            :key="index"
          >

            <div class="left"> {{ item.inspectionMatters }} </div>
             <van-switch
              active-color="#00b01b"
              v-model="item.isFinish"
              class="switch"
            />
            <div
              class="state"
              :style="{
                color: item.isFinish ? '#fff' : '#333',
              }"
            >
               {{ item.isFinish ? '已完成' : '未完成' }}
            </div>

            <div class="placeholder">点击确认完成情况</div>

          </div>

        </div>
         </van-form
      >
    </div>

    <div class="detailFoot">

      <div style="flex: 1">
         <van-button color="#26a2de" size="small" @click="handleReady"
          >完成上报</van-button
        >
      </div>

    </div>

  </div>

</template>

<script setup>
  import { reactive, onMounted } from 'vue'
  import {
    getResponseWordDetail,
    editWorkStatus,
    getInspectionMatters,
  } from '@/api/index'
  import { useRouter, useRoute } from 'vue-router'
  import { showFailToast, showSuccessToast } from 'vant'
  const route = useRoute()
  const router = useRouter()
  const state = reactive({
    checked: false,
    detail: {},
    matterList: [],
  })
  //返回
  const onClickLeft = () => history.back()
  const id = route.query.id
  onMounted(() => {
    getResponseWordDetail(id).then((res) => {
      if (res.data.code === 200 && res.data.data) {
        state.detail = res.data.data.reWorkMange

        if (
          res.data.data.reWorkMange.inspectionMatters &&
          res.data.data.reWorkMange.inspectionMatters !== ''
        ) {
          getInspectionMatters(
            res.data.data.reWorkMange.inspectionMatters,
          ).then((res) => {
            if (res.data && res.data.code == 200) {
              state.matterList = res.data.data
            }
          })
        }
      }
    })
  })
  // 确认到场
  const handleReady = async () => {
    const confirmArr = state.matterList.filter((item) => item.isFinish === true)
    if (
      confirmArr.length < state.matterList.length &&
      state.detail.workType === '巡查工单'
    ) {
      showFailToast('巡查事项未完成，请全部完成后提交')
      return
    } else {
      const inspectionMatters = state.matterList.map((item) => item.id)
      state.detail.inspectionMatters = inspectionMatters.join(',')
      state.detail.reWorkStatus = 3
      await editWorkStatus(state.detail)
      showSuccessToast('到场成功')
      history.back()
    }
  }
</script>

<style lang="less" scoped>
  .homeDetail {
  height: 100vh;
  background: #f7f8f7;
  padding: 0 6px;
  .tabr-nav-title {
    display: flex;
    align-items: center;
    font-weight: 600;
    height: 44px;
    margin-bottom: 10px;
    font-size: 18px;
    color: #29292c;
    line-height: 20px;
    text-align: center;
    font-style: normal;
    background: #fff;
  }
}
.newList {
  background: #fff;
  padding-bottom: 1px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;

  .list {
    width: 100%;
    background-color: rgba(242, 242, 242, 1);
    margin-bottom: 5px;
    padding: 8px 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    position: relative;
    &:last-child {
      margin-bottom: 0;
    }
    .left {
      color: #333;
    }
    .switch {
      margin-top: 10px;
      position: relative;
    }

    .state {
      position: absolute;
      left: 50px;
      bottom: 18px;

      color: #333;
    }

    .placeholder {
      position: absolute;
      left: 40%;
      bottom: 18px;
      color: #c5c5c5;
    }
  }
}

.form-container {
  height: calc(100vh - 135px);
  margin: 10px 0;
  overflow-y: auto;
  background: #fff;
}
.van-stepper {
  width: 100%;
}
::v-deep .van-stepper__input {
  width: calc(100% - 28px - 28px - 4px) !important;
}

.disabled {
  width: 100%;
  border: none;
  background: #f2f3f5;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.van-button--small {
  width: 100%;
}
.newList {
  --van-switch-width: calc(100vw - 50px);
}
</style>

